/******************************************************************************
* File description: MaintenanceYingGuang2JianCePianCha.qml
* Function: 维护-荧光检测：检测偏差
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-29
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */


    /* property 定义结束 */

    GLOBAL {id: global}

    ColumnLayout {
        id: containerLayout
        anchors {
            fill: parent
            topMargin: 16
        }
        spacing: 16

        // 非表格部分
        Item {
            id: topPartContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            Layout.leftMargin: 16
            Layout.rightMargin: 16

            RowLayout {
                id: topPartLayout
                anchors.fill: parent
                spacing: 8

                // 区域
                Label {
                    font.pixelSize: 16
                    color: "#FF222222"
                    Layout.alignment: Qt.AlignVCenter
                    text: "区域"
                }

                // 按钮
                TableView {
                    id: btnsContent

                    property var btnsTableData: []
                    signal pressedIndex(int index) // 发送表格下标信号
                    // 函数
                    // 下标转行列
                    property var index2RowCol: function(index){
                        return [parseInt(index / 6), index % 6]
                    }

                    // 行列转下标
                    property var rowCol2Index: function(row, col){
                        return row * 6 + col
                    }

                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    clip: true
                    boundsBehavior: Flickable.StopAtBounds
                    columnSpacing: 0
                    rowSpacing: 0
                    columnWidthProvider: function(column){
                        return btnsContent.width / 6
                    }

                    rowHeightProvider: function(row){
                        return btnsContent.height
                    }

                    onWidthChanged: {
                        forceLayout() // 强制重新布局刷新视图
                    }

                    onHeightChanged: {
                        forceLayout() // 强制重新布局刷新视图
                    }

                    model: TableModel {
                        id: tableModel

                        TableModelColumn {display: "A"}
                        TableModelColumn {display: "B"}
                        TableModelColumn {display: "C"}
                        TableModelColumn {display: "D"}
                        TableModelColumn {display: "E"}
                        TableModelColumn {display: "F"}

                        rows: btnsContent.btnsTableData
                    }

                    delegate: Rectangle{
                        id: tableDelegate

                        // 保存变量
                        property int curRow: row
                        property int curCol: column
                        property string text: display
                        // 边框
                        property QtObject leftBorder: null
                        property QtObject rightBorder: null
                        property QtObject topBorder: null
                        property QtObject bottomBorder: null

                        implicitWidth: btnsContent.columnWidthProvider(column)
                        implicitHeight: btnsContent.rowHeightProvider(row)
                        color: "transparent"

                        Label {
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            color: "#FF222222"
                            text: display
                        }

                        Component.onCompleted: {
                            // 边框
                            tableDelegate.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                            tableDelegate.rightBorder = global.createRightBorder(this, 2, "#FFCCCCCC", column === 5)
                            tableDelegate.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                            tableDelegate.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC")
                        }

                        // 槽函数
                        Connections {
                            target: btnsContent
                            // 点击表格事件
                            function onPressedIndex(index){
                                // 设置起始下标和结束下标
                                var [posRow, posCol] = btnsContent.index2RowCol(index)
                                // 各个边框颜色
                                var leftBorderColor = tableDelegate.leftBorder.color
                                var rightBorderColor = tableDelegate.rightBorder.color
                                var topBorderColor = tableDelegate.topBorder.color
                                var bottomBorderColor = tableDelegate.bottomBorder.color
                                // 背景颜色
                                var bgColor = tableDelegate.color

                                // 背景
                                if(tableDelegate.curCol === posCol) {
                                    // 颜色不同则渲染
                                    if(bgColor !== "#1A2F42CD") tableDelegate.color = "#1A2F42CD"
                                }else {
                                    // 颜色不同则渲染
                                    if(bgColor != "transparent") tableDelegate.color = "transparent"
                                }

                                // 边框
                                // 上，下，左边框
                                if(tableDelegate.curCol === posCol){
                                    // 修改颜色
                                    tableDelegate.topBorder.color = "#FF2F42CD"
                                    tableDelegate.bottomBorder.color = "#FF2F42CD"
                                    tableDelegate.leftBorder.color = "#FF2F42CD"
                                    tableDelegate.rightBorder.color = "#FF2F42CD"
                                }else {
                                    tableDelegate.topBorder.color = "#FFCCCCCC"
                                    tableDelegate.bottomBorder.color = "#FFCCCCCC"
                                    tableDelegate.leftBorder.color = "#FFCCCCCC"
                                    tableDelegate.rightBorder.color = "#FFCCCCCC"
                                }

                                // 右边框
                                // 判断不为左边框
                                if(tableDelegate.curCol !== posCol) {
                                    // 右一个表格的左边框
                                    if(tableDelegate.curRow === posRow && tableDelegate.curCol === posCol+1){
                                        // 修改颜色
                                        tableDelegate.leftBorder.color = "#FF2F42CD"
                                    }else {
                                        tableDelegate.leftBorder.color = "#FFCCCCCC"
                                    }
                                }

                                // 重新绘制边框
                                // 颜色不同则渲染
                                if(leftBorderColor !== tableDelegate.leftBorder.color) tableDelegate.leftBorder.requestPaint()
                                if(rightBorderColor !== tableDelegate.rightBorder.color) tableDelegate.rightBorder.requestPaint()
                                if(topBorderColor !== tableDelegate.topBorder.color) tableDelegate.topBorder.requestPaint()
                                if(bottomBorderColor !== tableDelegate.bottomBorder.color) tableDelegate.bottomBorder.requestPaint()
                            }
                        }
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            var mouseX = mouse.x
                            var mouseY = mouse.y
                            // 边界判断
                            if(mouseX >= parent.width) mouseX = parent.width - 1
                            if(mouseY >= parent.height) mouseY = parent.height - 1
                            if(mouseX < 0) mouseX = 0
                            if(mouseY < 0) mouseY = 0
                            // 设置值
                            var _curMouseRow = parseInt(mouseY / btnsContent.rowHeightProvider(0))
                            var _curMouseCol = parseInt(mouseX / btnsContent.columnWidthProvider(0))
                            btnsContent.pressedIndex(btnsContent.rowCol2Index(_curMouseRow, _curMouseCol))

                            // console.log(_curMouseRow, _curMouseCol)
                        }
                    }

                    Component.onCompleted: {
                        btnsContent.btnsTableData = [
                                    {"A": "A", "B": "B", "C": "C", "D": "D", "E": "E", "F": "F"}]
                    }
                }

                // 通道
                LabelComboBox {
                    id: runZhiSpeed
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                    comboBoxWidth: width
                    comboBoxHeight: height
                    showListMaxCountinPage: 4
                    model: ["FAM", "VIC", "ROX"]
                    comboBoxText: "通道"
                }
            }
        }

        // 表格部分
        MaintenanceYingGuang2JianCePianChaTable {
            id: jianCePianChaTable
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.bottomMargin: 74
        }
    }
}
